<template>
  <view class="content">
    <top-search
      :showState="true"
      :showMore="false"
      :showCarNo="false"
      :showCustomer="false"
      :showSearch="false"
      @bindChange="confirmChange"
    ></top-search>
    <!-- 头部搜索-->
    <view class="btn">
      <button class="new fntw600" type="primary" @click="handleAdd">
        +添加产品
      </button>
    </view>
    <!-- 排号信息列表 -->
    <view class="phxx-list">
      <view
        class="item"
        :key="item.id"
        v-for="(item, index) in productList"
        @click.stop="handleDetail(item.id)"
      >
        <product-card
          :data="item"
          @linkToRecords="linkToRecords(item.id)"
        ></product-card>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
import { getProductList } from '@/api/product';
import { getDictList } from '@/api/login';
import { getDriverId } from '@/utils/auth';

export default {
  data() {
    return {
      proName: '',
      isMore: 'more',
      coalTypeList: [],
      productList: [],
      queryParam: {
        pageNo: 1,
        pageSize: 5
      }
    };
  },

  async onLoad() {
    this.queryParam.pageNo = 1;
    this.isMore = 'more';
    this.productList = [];
    await this.getDictList();
    this.getProductList();
  },

  onPullDownRefresh() {
    this.queryParam.pageNo = 1;
    this.isMore = 'more';
    this.productList = [];
    this.getProductList();
  },

  onReachBottom() {
    if (this.isMore == 'more') {
      this.queryParam.pageNo++;
      this.getProductList();
    }
  },

  methods: {
    handleAdd() {
      uni.setStorageSync('title', '添加产品');
      uni.redirectTo({
        url: '/packageB/pages/common/product-editting/index'
      });
    },

    handleDetail(id) {
      uni.redirectTo({
        url: `/packageB/pages/common/product-details/index?id=${id}`
      });
    },

    linkToRecords(id) {
      uni.navigateTo({
        url: `/packageB/pages/product/records?id=${id}`
      });
    },

    confirmChange(data) {
      this.proName = data.vehicleNo;
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.productList = [];
      this.getProductList();
    },

    async getDictList() {
      const res = await getDictList();
      if (res.code === 0) {
        this.coalTypeList = (res?.data || []).filter(
          (e) => e.dictType === 'coal_type'
        );
      }
    },

    //获取排号信息列表
    async getProductList() {
      try {
        const data = this.queryParam;
        data['userId'] = getDriverId();
        if (this.proName) {
          data['proName'] = this.proName;
        } else {
          data['proName'] = '';
        }
        const res = await getProductList(data);

        if (res.code == 0) {
          const result = res.data.list || [];
          this.productList = [
            ...this.productList,
            ...this.exchangeCoalTypeLabel(result)
          ];
          if (res?.data?.total == this.productList.length) {
            this.isMore = 'noMore';
          } else {
            this.isMore = 'more';
          }
        }
        wx.stopPullDownRefresh();
      } catch (e) {
        return false;
      }
    },

    exchangeCoalTypeLabel(result) {
      return result.map((e) => {
        e.productType = this.coalTypeList.find(
          (m) => m.value === e.productType.toString()
        )?.label;
        return e;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.phxx-list {
  padding: 20rpx;
  .item + .item {
    margin-top: 20px;
  }
}
</style>
